<template>
    <div id="chartContainer"
         style="width: 1200px;height:700px;margin: 30px 0px 0px 30px;background-color: #fefefe"></div>


</template>

<style scoped>

</style>
<script lang="ts" setup>
import * as echarts from 'echarts/core';
import {onMounted, ref, reactive, toRaw} from 'vue'
import axios from 'axios'

onMounted(() => {
    initChart();
})

type orders = {
    beginTime: Date
    endTime: Date
}
const begin = new Date()
begin.setDate(begin.getDate() - 7);
const orderList = reactive<orders>(<orders>{
    beginTime: begin,
    endTime: new Date()
})

const initChart = () => {
    const chartContainer = document.getElementById('chartContainer');
    const myChart = echarts.init(chartContainer)
    axios.post('http://127.0.0.1:8080/orderList/orders', orderList).then(res => {
        if (res.data) {
            console.log(res.data)
            const options = {
                title: {
                    text: '订单营业额',
                },
                xAxis: {
                    type: 'category',
                    data: res.data.dateList.split(","),
                    axisLabel:{
                        interval:0
                    },
                    axisLine:{
                        length:100
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: res.data.turnOverList.split(","),
                    type: 'line'
                }]
            };
            myChart.setOption(options);
        }
    }).catch(Error => {
        console.log(Error)
    })



}


</script>